<template>
  <div class="application-header">
		<div class="application-title">
      <div class="back-btn-slot" v-if="backBtnFlag" @click="goBack">
        <slot name="backBtn"></slot>
      </div>
      <span class="title">
        {{title}}
      </span>
      <span class="desc">
        说明
      </span>
    </div>
    <div class="application-options">
      <!-- 时间筛选 -->
      <a-range-picker class="range-picker" :default-value="[moment(rangeDate.startDate, dateFormat), moment(rangeDate.endDate, dateFormat)]" @change="onChange">
        <a-icon slot="suffixIcon" type="calendar" />
      </a-range-picker>
      <a-select v-if="showChannel" class="select-options1" placeholder="请选择渠道" style="width: 120px">
        <a-select-option
          v-for="item in selectOptions"
          :key="item.value"
          :value="item.value"
          @click="selectChannelOption(item)"
          >
          {{item.value}}
        </a-select-option>
      </a-select>
      <a-select v-if="showVersion" class="select-options2" placeholder="请选择版本" style="width: 120px">
        <a-select-option
          v-for="item in selectOptionsVersion"
          :key="item.value"
          :value="item.value"
          @click="selectVersionOption(item)"
          >
          {{item.value}}
        </a-select-option>
      </a-select>
    </div>
	</div>
</template>

<script>
import { mapGetters } from "vuex";
import moment from 'moment';
import { getChannelSelectList, getAppVersionSelectList } from '@/api/applicationHeader.js';

export default {
	name: 'ApplicationHeader',
  props: {
    title: {
      type: String,
      default: '新增用户分析'
    },
    showVersion: {
      type: Boolean,
      default: true
    },
    showChannel: {
      type: Boolean,
      default: true
    },
    backBtnFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    this.dateFormat = 'YYYY-MM-DD';
    return {
      selectOptions: [
        {
          key: null,
          value: '全部渠道'
        },
      ],
      selectOptionsVersion: [
        {
          key: null,
          value: '全部版本'
        }
      ],
      rangeDate: {
        startDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-01}`,
        endDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
      },
      queryParams: {
        appKey: ''
      }
    };
  },
  computed: {
    ...mapGetters(["applicationId"]),
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    moment,
    onChange(date, dateString) {
      // console.log(date, dateString);
      let flag = true;
      dateString.forEach(item => {
        if (!item) {
          flag = false;
        }
      })
      if (flag) {
        this.$emit('getTime', dateString)
      }  
    },
    selectChannelOption(item) {
      this.$emit('getChannel', item)
    },
    selectVersionOption(item) {
      this.$emit('getVersion', item)
    },
    // 渠道
    async handleGetChannelSelectList() {
      let res
      try {
        res = await getChannelSelectList(this.queryParams)
      } catch (error) {
        console.log(error)
      } 
      let { code } = res;
      if ( code == 0 ) {
        // 做些什么
        if (res.data.length != 0) {
          res.data.forEach(item => {
            if (item !== null) {
              const newItem = JSON.parse(JSON.stringify(item));
              newItem['key'] = newItem['code'];
              newItem['value'] = newItem['name'];
              delete newItem.code;
              delete newItem.name;
              this.selectOptions.push(newItem);
            }
          })
          // console.log(this.selectOptions)
        }
      }
    },
    // 版本
    async handleGetAppVersionSelectList() {
      let res
      try {
        res = await getAppVersionSelectList(this.queryParams)
      } catch (error) {
        console.log(error)
      } 
      let { code } = res;
      if ( code == 0 ) {
        // 做些什么
        if (res.data.length != 0) {
          res.data.forEach(item => {
            if (item !== null) {
              const newItem = JSON.parse(JSON.stringify(item));
              newItem['key'] = newItem['version'];
              newItem['value'] = newItem['version'];
              delete newItem.version;
              this.selectOptionsVersion.push(newItem);
            }
          })
          // console.log(this.selectOptionsVersion)
        }
      }
    }
  },
  async mounted() {
    this.queryParams.appKey = this.applicationId;    
    const res = await Promise.all(
      [
        this.handleGetChannelSelectList(),
        this.handleGetAppVersionSelectList()
      ]
    )
  }
};
</script>

<style lang="scss" scoped>
.application-header {
  height: 112px;
  background: #fff;
  overflow: hidden;
  .application-title {
    display: flex;
    align-items: center;
    margin-top: 22px;
    margin-left: 24px;
    .back-btn-slot {
      height: 30px;
      padding-top: 7px;
      padding-right: 5px;
      cursor: pointer;
    }
    .title {
      font-size: 20px;
      color: #000;
      font-weight: 600;
      margin-right: 12px;
    }
    .desc {
      font-size: 14px;
    }
  }
  .application-options {
    overflow: hidden;
  }
  .range-picker {
    margin-top: 14px;
    margin-left: 24px;
  }
  .select-options1, .select-options2 {
    margin-left: 24px;
  }
}
</style>
